<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.min.js"></script>
    </head>
    <style>
        .p_id{
            border-bottom: black 2px solid;
            line-height: 50px;
            font-size: 24px;
        }
        .city{
            display: inline-block;
            width: 100px;
            text-align: center;
        }

    </style>
    <body>
        <p class="p_id">
            <span class="city">城市</span>
            <span class="city">北京</span>
            <span class="city">天津</span>
            <span class="city">上海</span>
            <span class="city">深圳</span>
            <span class="city">广东</span>
        </p>
        <p id="add" class="p_id" style="border: none;display: inline-block"></p>
        <span id="empty" class="p_id" >清空</span>
    </body>
    <script>
        function del_self(obj) {
            $(obj).remove()
        }

        function add_city(obj) {
            var clone_obj = $(obj).clone(true);//创建克隆对象
            clone_obj.attr("onclick","del_self(this)");//给克隆对象添加删除自己属性
            $("#add").prepend(clone_obj)//把克隆对象添加到("#add")中
        }
        $(".city").attr("onclick","add_city(this)");//给已有的城市添加属性
        $("#empty").click(
            function () {
                $("#empty").empty()
            }
        )
    </script>
</html>